﻿
@inject IJSRuntime JS

<div style="display:flex;margin-top:10px" id="backtop">
    <div style="width:85%;overflow-y:auto;overflow-x:hidden;padding-left:10px; padding-right:20px;padding-bottom:20px;height:98vh;">
        @Body
    </div>
    <div style="margin-left:20px;overflow-y:auto">
        @if (DataSource != null)
        {
            <Menu Style="MenuStyle.Texted" Compact Size="Size.Tiny" Linked Vertical>
                @foreach (var item in DataSource)
                {
                    <Item Fitted Actived="Actived(item)" @onclick="@(e=>Click(item))">
                        @item
                    </Item>
                }
            </Menu>
        }
    </div>
</div>
@code{
    [Parameter] public RenderFragment Body { get; set; }

    [Parameter] public List<string> DataSource { get; set; }

    string SelectedId;
    bool Actived(string id)
    => SelectedId == id;

    async Task Click(string id)
    {
        SelectedId = id;
        await JS.InvokeVoidAsync("hash", id);
        StateHasChanged();
    }
}